<template>
	<view class="container">
		<view class="bg-colore"></view>
		<view class="content">
			<view class="topss">
				<uni-search-bar placeholder="搜索" @confirm="search" bgColor="#fff" v-model="keyWord"
					@cancel="getListData(allNewsList,1)" @clear="getListData(allNewsList,1)" />
			</view>
			<view class="wrap">
				<view class="address">
					<view class="left">
						<image src="../../static/sj_sqlocation.png" mode="scaleToFill" class="image"></image>
						当前位置：{{myLocation.name}}
					</view>
					<view class="xgbtn" @click="openMap">
						修改地址
					</view>

				</view>
			</view>

			<view class="tabs">
				<view class="top_nav">
					<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="true"
						:scroll-into-view="scrollInto">
						<view v-for="(tab,index) in tabBars" :key="tab.columnId" class="uni-tab-item" :id="tab.columnId"
							:data-current="index" @click="ontabtap" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">
							<text class="uni-tab-item-title">{{tab.title}}</text>
						</view>
					</scroll-view>
				</view>
				<view class="line-h"></view>
				<view class="newslist">
					<view class="jrjg-div">
						<view class="jrjg-list" v-for="(item,index) in newsList" :key="index"
							@click="$public.navto('dianPu',{applyId:item.applyId})">
							<image :src="$public.imgageUrl(item.params.product[0].smallImage)" mode="scaleToFill" class="image">
							</image>
							<view class="title1">
								{{item.params.product[0].title}}
							</view>
							<view class="title2">
								抢购价：<text class="redzi">￥{{item.params.product[0].json.money}}</text>
							</view>
							<view class="title3">
								<image src="/static/sj_sq_jf.png" mode="scaleToFill" class="image"></image> 返<text
									class="redzi">{{item.params.product[0].json.fanJf}}</text>积分
							</view>
							<view class="juli">
								<view class="dm"><uni-icons type="shop-filled" size="16"></uni-icons>{{item.tenementName}}</view>
								<view class="julinum">
									距您 {{item.juli*1000}}m
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	/* import {
		mapState
	} from 'vuex'
	import share from '@/store/index.js' */
	export default {
		data() {
			return {
				banner: [],
				notice: "",
				productList: [],
				changYongData: [],
				tzList: [],
				yyzdjList: [],
				cacheTab: [],
				tabIndex: 0,
				tabBars: [],
				scrollInto: "",
				showTips: false,
				showSS: false,
				newsList: [],
				allNewsList: [],
				myLocation: {},
				keyWord: ""
			}
		},
		async onLoad() {
			this.getMallColumn();
			this.getShangJiaList()
			// this.getArticle20();
		},
		onShow() {
			if (!this.$public.isLoginUrl())
				return false;
		},
		methods: {
			search() {
				let that = this
				let data = this.$_.filter(this.allNewsList, function(o) {
					return o.tenementName.indexOf(that.keyWord) >= 0 || o.params.product[0].title.indexOf(that.keyWord) >= 0;
				})
				console.log("data", data)
				this.getListData(data, 1)
			},
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				// console.log("index", index)
				this.switchTab(index);
			},
			openMap() {
				// console.log("openMap")
				let that = this
				uni.chooseLocation({
					latitude: this.myLocation.lat,
					longitude: this.myLocation.lng,
					success: function(res) {
						console.log("res", res);
						let params = {
							city: "未获取到",
							name: res.name,
							lng: res.longitude,
							lat: res.latitude,
						}
						if (!params.name) {
							params.name = "临时地址"
						}
						uni.setStorageSync('setLocation', params);
						that.myLocation = params
						that.getListData(that.allNewsList)
					},
					fail: function(res) {
						console.log("res", res);
					}
				});
			},
			switchTab(index) {
				// if (this.tabIndex === index) {
				// 	return;
				// }
				this.newsList = []
				let word = this.word;
				if (index == 0) {
					if (word) {
						this.allNewsList.forEach(item => {
							if (item.title.indexOf(word) >= 0)
								this.newsList.push(item)
						})
					} else {
						this.allNewsList.forEach(item => {
							this.newsList.push(item)
						})
					}
				} else {
					let columnId = this.tabBars[index].columnId
					if (word) {
						this.allNewsList.forEach(item => {
							if (item.title.indexOf(word) >= 0 && item.columnId == columnId)
								this.newsList.push(item)
						})
					} else {
						this.allNewsList.forEach(item => {
							if (item.columnId == columnId) {
								this.newsList.push(item)
							}
						})
					}

				}
				this.tabIndex = index;
				this.scrollInto = this.tabBars[index].id;
			},
			getMallColumn() {
				this.$public.htmlPost("/api/getMallColumn", {
					parentId: 3
				}).then((res) => {
					console.log("getMallColumn res", res)
					let data = res.data;
					if (data.code == 0) {
						this.tabBars.push({
							columnId: 0,
							title: "全部"
						})
						data.data.forEach(item => {
							this.tabBars.push(item)
						})
					}
				})
			},
			getShangJiaList() {
				let that = this
				this.$public.getLocation()
				let location = uni.getStorageSync('setLocation');
				// console.log("location", location)
				if (location) {
					this.myLocation = location
				}
				this.$public.getAddress(location.lng, location.lat).then((res) => {
						let params = {
							city: res.result.address_component.city,
							name: res.result.address_reference.landmark_l2.title,
							lng: location.lng,
							lat: location.lat,
						}
						console.log('解析成功', params)
						uni.setStorageSync('setLocation', params);
						that.myLocation = params
					})
					.catch((e) => {
						console.log(e, '解释地址失败')
					})
				// console.log("this.myLocation", this.myLocation)
				this.$public.htmlPost("/api/getShangJiaList").then((res) => {
					console.log("getShangJiaList res", res)
					let data = res.data;
					if (data.code == 0) {
						that.getListData(data.data)
						// this.sjList = data.data
					}
				})
			},
			getListData(data, id) {
				let that = this
				that.newsList = []
				if (!id)
					that.allNewsList = []
				data.forEach(item => {
					let arr = item.bak1.split(",");
					item.lat = arr[0];
					item.lng = arr[1];
					item.juli = that.$public.distance(item.lat, item.lng, that.myLocation.lat, that.myLocation.lng)
					if (item.params.product.length > 0) {
						item.params.product.forEach(proitem => {
							proitem.json = JSON.parse(proitem.referenceMoney)
						})
						that.newsList.push(item)
						if (!id)
							that.allNewsList.push(item)
					}
				})
				that.newsList.sort(function(a, b) {
					return a.juli - b.juli
				});
				if (!id)
					that.allNewsList.sort(function(a, b) {
						return a.juli - b.juli
					});
			}


		},
	}
</script>

<style lang="scss" scoped>
	.content {
		// background-color: #fff;
		// background: #e37164;
		// background-size: 100% auto;

		.wrap {
			padding: $uni-wrap-padding;
		}

		.topss {
			// background: #e37164;
		}

		.address {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 34rpx 0 44rpx;

			.left {
				display: flex;
				align-items: center;
				color: #666666;
				font-size: 28rpx;

				.image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}
			}

			.xgbtn {
				width: 160rpx;
				height: 48rpx;
				box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(223, 104, 106, 0.2);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				opacity: 1;
				border: 2rpx solid #DF686A;
				font-size: 26rpx;
				color: #DF686A;
				display: flex;
				align-items: center;
				justify-content: center;

			}
		}

		.material-column {
			.image-div {
				// width: 116rpx;
				// height: 116rpx;
				// background: #f3f3f3;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin: 40rpx auto 10rpx;

				.image {
					width: 136rpx;
					height: 136rpx;
				}
			}

			.text {
				text-align: center;
				width: 130rpx;
				color: #666666;
				margin: 0 auto;
				// line-height: 2;
				font-size: 28rpx;
			}
		}

	}

	.tabs {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #ffffff;
		padding: $uni-wrap-padding;
		padding-bottom: 180rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding-top: 20rpx;


		.ssimage {
			width: 37rpx;
			height: 40rpx;
		}

		.top_nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.scroll-h {
		width: 630rpx;
		height: 80rpx;
		flex-direction: row;
		white-space: nowrap;
		/* flex-wrap: nowrap; */
		/* border-color: #cccccc;
		border-bottom-style: solid;
		border-bottom-width: 1px; */
	}

	.line-h {
		height: 1rpx;
		background-color: #cccccc;
		margin-bottom: 30rpx;
	}

	.uni-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		flex-wrap: nowrap;
		padding-left: 34rpx;
		padding-right: 34rpx;
		color: #555;
	}

	.uni-tab-item-title {
		font-size: 30rpx;
		height: 74rpx;
		line-height: 74rpx;
		flex-wrap: nowrap;
		white-space: nowrap;
	}

	.uni-tab-item-title-active {
		color: #DF686A;
		border-bottom: 6rpx solid #DF686A;
	}

	.newslist {
		.jrjg-div {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.jrjg-list {
				width: 330rpx;
				background: #FAFAFA;
				border-radius: 16rpx;
				overflow: hidden;
				font-size: 28rpx;
				margin-bottom: 30rpx;

				.image {
					width: 330rpx;
					height: 330rpx;
				}

				.title1 {
					padding: 0 16rpx;
					color: #333333;
					margin-top: 24rpx;
				}

				.title2 {
					padding: 0 16rpx;
					margin: 8rpx 0 16rpx;
					color: #999999;
					font-size: 26rpx;

					.redzi {
						font-size: 32rpx;
					}
				}

				.title3 {
					padding: 0 16rpx;
					color: #666666;
					margin-bottom: 16rpx;
					display: flex;
					align-items: center;

					.image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 15rpx;
					}
				}

				.redzi {
					color: #DF686A;
				}

				.juli {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 16rpx;
					padding-bottom: 24rpx;

					.dm {
						color: #666666;
						font-size: 24rpx;
						display: flex;
						align-items: center;
						width: 160rpx;
						// height: 28rpx;
						overflow: hidden;
						white-space: nowrap;
						// word-wrap: break-word;
						// word-break: break-all;
						// -webkit-line-clamp: 1;
						// -webkit-box-orient: vertical;
					}

					.julinum {
						color: #FF9466;
						font-size: 22rpx;

					}
				}
			}
		}
	}
</style>